<template>
  <scroll-view
    :style="[styles]"
    class="scroll-y"
    :class="[ggclass, { 'safe-box': isSafe }]"
    scroll-y
    @refresherrefresh="refresherrefresh"
    @refresherrestore="refresherrestore"
    @scrolltolower="scrolltolower"
    enhanced
    show-scrollbar
    :refresher-triggered="triggered"
    enable-back-to-top
    scroll-with-animation
    refresher-enabled
    lower-threshold="120"
  >
    <view class="collect" scroll-anchoring>
      <c-loading-page
        v-if="pagesStatus == 0"
        :value="pagesStatus == 0"
      ></c-loading-page>

      <slot v-else-if="pagesStatus == 1" v-bind="list"></slot>

      <view class="empty-wrap" v-if="pagesStatus == 2">
        <image :src="imgFilter(emptySrc)" mode="widthFix"></image>
        <view>{{ emptyText }}</view>
      </view>
      <c-pull-up-loading :type="pullType"></c-pull-up-loading>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { imgFilter } from "../ways/filter";
import {
  computed,
  defineProps,
  reactive,
  onMounted,
  getCurrentInstance,
  toRefs,
} from "vue";
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  isSafe: {
    type: Boolean,
    default: false,
  },
  emptyText: {
    // 说明文字
    type: String,
    default: "这里空空如也...",
  },
  ggclass: {
    type: String,
    default: "",
  },
  emptySrc: {
    // 图片地址
    type: String,
    default: "/static/img/empty.png",
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  minHeight: {
    type: String,
    default: "",
  },
  minWidth: {
    type: String,
    default: "",
  },
  api: {
    type: String,
    default: "",
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  pageSize: {
    type: [String, Number],
    default: 10,
  },
  padding: {
    type: String,
    default: "",
  },
});
interface stateType{
	totalCount: number;
	list: any[];
	queryParams: any;
	triggered: boolean;	
	freshing: boolean;
	pullType: number;
	pagesStatus: number;
	result: any;
	dadtaApi: string;
}
const state:stateType = reactive({
  totalCount: 99,
  list: [],
  queryParams: {
    pageIndex: 1,
    pageSize: 10,
  },
  triggered: false,
  freshing: false,
  pullType: 0,
  pagesStatus: 1,
  result: {},
  dadtaApi: "",
});
const {
  triggered,
  freshing,
  pullType,
  pagesStatus,
  result,
  dadtaApi,
  queryParams,
  list,
  totalCount,
} = toRefs(state);
const styles = computed(() => {
  let params = {
    width: proxy.$rpxunit(props.width),
    height: proxy.$rpxunit(props.height),
    minWidth: proxy.$rpxunit(props.minWidth),
    minHeight: proxy.$rpxunit(props.minHeight),
    padding: props.padding
      .split(" ")
      .map((v) => proxy.$rpxunit(v))
      .join(" "),
  };
  return params;
});

const computedApi = computed({
  get() {
    if (state.dadtaApi) return state.dadtaApi;
    return props.api;
  },
  set(val) {
    state.dadtaApi = val;
  },
});

onMounted(() => {
  if (props.api) {
    init(props.api, {
      ...props.params,
    });
  }
});

const refresherrefresh = async () => {
  state.triggered = true;
  if (state.freshing) return;
  state.freshing = true;
  await init(computedApi.value, {
    ...props.params,
  });
  state.triggered = false;
  state.freshing = false;
};
const refresherrestore = () => {
  state.triggered = true; // 需要重置
};
const init = async (api: string, params: any) => {
  let apis = api;
  if (typeof api !== "string" && !api) {
    apis = computedApi.value;
  }
  if (typeof api === "object") {
    params = api;
  }
  state.pullType = 0;
  state.queryParams.pageIndex = 1;
  let res = await getList(apis, params);
  if (state.list.length) {
    state.pagesStatus = 1;
  } else {
    state.pagesStatus = 2;
  }
  return res;
};
const getList = async (api: string, params: any) => {
  state.pullType = 1;
  computedApi.value = api || computedApi.value;
  state.queryParams = Object.assign(state.queryParams, props.params, params);
  let { result } = await proxy.$http.get(computedApi.value, state.queryParams);
  state.result = result || {};
  if (state.queryParams.pageIndex > 1) {
    state.list.push(...result.items);
  } else {
    state.list = result.items;
  }
  state.pullType = 0;
  state.totalCount = result.total;
  return state.list;
};
// scroll-view到底部加载更多
const scrolltolower = () => {
  if (state.list.length >= state.totalCount) {
    state.pullType = 2;
  }
  if (state.pullType === 2) return;
  state.queryParams.pageIndex += 1;
  getList(computedApi.value, state.queryParams);
};
</script>

<style lang="scss" scoped>
.scroll-y {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
}

.empty-wrap {
  width: 100%;
  padding-top: 120rpx;
  box-sizing: border-box;

  image {
    width: 350rpx;
    height: 290rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  view {
    text-align: center;
    font-size: 26rpx;
    letter-spacing: 1rpx;
    color: #a1adbd;
    margin-top: 5rpx;
  }
}
</style>